<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>一边滚动，一边显示加载图片</title>
		<style>
		 .b{
			 border: 15px red groove;
			 width: 500px;
			 background-color: bisque;
		 }
		</style>
		<script src="../day8/jquery-3.4.1.min.js"></script>
		<script>
			$(function(){
				$("#d7").mouseover(function(){
					$(this).toggleClass("b");
				});
				$("#d7 li").hover(function(){
						$(this).css({"font-size":"60px"})
					},
					function(){
						$(this).css({"font-size":"15px"})
					}
				);
				$(window).scroll(function(){
					console.log($(this).scrollTop()+","+$("#pixie").offset().top);
					console.log("可见区域:"+$(window).height());
					
					if($(this).scrollTop()+$(window).height() >=$("#pixie").offset().top)
					{
						//alert("xxx");
						$("#pixie").attr("src",$("#pixie").attr("data-src"));
					}
				});
			});
		</script>
	</head>
	<body>
	
	<div id="d7">
		<ul type="square">
			<li>apple</li>
			<li>banana</li>
			<li>grape</li>
			<li>pear</li>
			<li>water-melon</li>
		</ul>
	</div>
	<div id="dd" style="height: 5000px;"></div>
		<img id="pixie" src="../day7/练习1：访问当当购物车页面节点/images/dd_logo.jpg" data-src="../day4/1621998059577218.jpg" />
	</body>
</html>
